<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
	<title>Loja</title>
	<link rel="stylesheet" type="text/css" href="../css/style.css"/>
	<script src="../js/FormataCampos.js"  type="text/javascript" ></script>
</head>
<body>
<div id="wrapper">
    <!--<h1>Apple.com menu.<small>Created using only CSS3.</small></h1>  -->
    <div id="content">
		
        <nav>
            <ul id="appleNav">
                <li><a href="http://www.apple.com/" title="Apple"><img src="../imagens/logo.png" alt="Apple Logo" /></a></li>
                <li><a href="http://store.apple.com/" title="Store">Store</a></li>
                <li><a href="http://www.apple.com/mac/" title="Mac">Mac</a></li>
                <li><a href="http://www.apple.com/ipod/" title="iPod">iPod</a></li>
                <li><a href="http://www.apple.com/iphone/" title="iPhone">iPhone</a></li>
                <li><a href="http://www.apple.com/ipad/" title="iPad">iPad</a></li>
                <li><a href="http://www.apple.com/itunes/" title="iTunes">iTunes</a></li>
                <li><a href="http://www.apple.com/support/" title="Support">Support</a></li>
                <li>
                    <form>
                        <input type="text" />
                    </form>
                </li>
            </ul>
        </nav>
		<div id="box">
		<form class="contact_form" action="#" method="post" name="contact_form">
    <ul>
        <li>
             <h2>Cadasto de Clientes</h2>
             <span class="required_notification">* Todos os campos são obrigatórios</span>
        </li>
        <li>
            <label for="name">Nome:</label>
            <input type="text"  placeholder="Nome do Cliente" required />
            <span class="form_hint">Nome completo do Cliente"</span>
        </li>
        <li>
            <label for="name">RG:</label>
            <input type="text"  placeholder="RG" required />
            <span class="form_hint">RG do Cliente"</span>
        </li>
        <li>
            <label for="name">CPF:</label>
            <input type="text"  placeholder="CPF" pattern="\d{3}\.\d{3}\.\d{3}-\d{2}"
               title="O CPF deve estar no padrão: xxx.xxx.xxx-xx" 
               onKeyPress="MascaraCPF(contact_form.cpf);" maxlength="14" required />
            <span class="form_hint">CPF do Cliente<br> Insira no padrão: xxx.xxx.xxx-xx"</span>
        </li>
        <li>
            <label for="name">CEP:</label>
            <input type="text"  placeholder="CEP" pattern="\d{2}\.\d{3}\-\d{3}"
               title="O CEP deve estar no padrão: xx.xxx-xxx" 
               onKeyPress="MascaraCPF(contact_form.cpf);" maxlength="14" required />
            <span class="form_hint">CEP<br> Insira no padrão: xx.xxx-xxx"</span>
            <span><a href="http://www.buscacep.correios.com.br/" title="Busca do CEP">clique aqui para procurar o CEP</a></span>
        </li>
        
        <li>
            <label for="email">E-mail:</label>
            <input type="email" name="email" placeholder="nome@dominio.com" 
            pattern="[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,3})" required />
            <span class="form_hint">Deve estar no formato: "nome@algumacoisa.com"</span>
        </li>
        <li>
            <label for="website">Website:</label>
            <input type="url" name="website" placeholder="http://johndoe.com" required pattern="(http|https)://.+"/>
            <span class="form_hint">Proper format "http://someaddress.com"</span>
        </li>
        <li>
            <label for="message">Message:</label>
            <textarea name="message" cols="40" rows="6" required ></textarea>
        </li>
        <li>
        	<button class="submit" type="submit">Submit Form</button>
        </li>
    </ul>
</form>
        <!-- <p><em>&quot;Look ma, no images!&quot;</em></p>
        <p>Well, that's not entirely true: The Apple logo and the magnifier are images, but everything else (shadows, gradients etc.) has been created using only CSS(3). Pretty cool, don't you think? You'll even see an animation of the menu, when viewing this page using a Webkit browser (Safari or Chrome).</p>
        <p>This menu is a clone of the current top menu of the <a href="http://www.apple.com/" title="Apple">Apple.com</a> website (without the animations/effects etc. of <a href="http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html" title="A fancy Apple.com-style search suggestion">the search navigation</a>). Dive into the source code of this page to find out how it's created.</p>
		 -->
		</div>
    </div>
</div>
</body>
</html>

